﻿<phone:PhoneApplicationPage
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing" xmlns:em="clr-namespace:Microsoft.Expression.Media;assembly=Microsoft.Expression.Drawing" x:Class="ScheduleMVVM.SearchPage"
                            xmlns:ext="clr-namespace:WPExtensions;assembly=WPExtensions"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="800"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            >
	<phone:PhoneApplicationPage.Resources>
		<DataTemplate x:Key="StationPickerItemTemplate">
			<Grid>
				<TextBlock Margin="0,5,1,5" TextWrapping="Wrap" Text="{Binding Title}" d:LayoutOverrides="Width, Height" FontSize="24"/>
			</Grid>
		</DataTemplate>
		<DataTemplate x:Key="StationPickerItemTemplate_front">
			<Grid>
				<TextBlock Margin="0,0,1,-1" TextWrapping="Wrap" Text="{Binding Title}" d:LayoutOverrides="Width, Height" FontSize="23"/>
			</Grid>
		</DataTemplate>
        <DataTemplate x:Key="AutoCompleteItemTemplate">

            <StackPanel Margin="5,5,0,0">

                <TextBlock Text="{Binding Title}" FontSize="24" Margin="5,5,0,0" />
                <TextBlock Text="{Binding Department}" FontSize="18" FontFamily="Segoe WP Light" Margin="10,0,0,0">
                	<TextBlock.Foreground>
                		<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                	</TextBlock.Foreground>
                </TextBlock>

            </StackPanel>

        </DataTemplate>
        <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">
			<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
		</ControlTemplate>
		<Style x:Key="TextBoxStyleNoSelection" TargetType="TextBox">
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
			<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
			<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="Padding" Value="2"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="TextBox">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Collapsed</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="ReadOnly">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Collapsed</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledOrReadonlyBorder">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledOrReadonlyBorder">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledOrReadonlyContent">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused">
									</VisualState>
									<VisualState x:Name="Unfocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="EnabledBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}">
								<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
							</Border>
							<Border x:Name="DisabledOrReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
								<TextBox x:Name="DisabledOrReadonlyContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsReadOnly="True" SelectionForeground="{TemplateBinding SelectionForeground}" SelectionBackground="{TemplateBinding SelectionBackground}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</phone:PhoneApplicationPage.Resources>
    
	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
	<phone:PhoneApplicationPage.DataContext>
		<Binding Path="Search" Source="{StaticResource Locator}"/>
	</phone:PhoneApplicationPage.DataContext>
    <!-- Transition support -->
    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
    <Grid x:Name="LayoutRoot">
    	<Grid.Background>
    		<SolidColorBrush Color="{StaticResource Crisp Sheets}"/>
    	</Grid.Background>
        <Grid.RowDefinitions>
        	<RowDefinition Height="Auto" />
        	<RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle"
                       Text="{Binding ApplicationTitle}"
                       Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock x:Name="PageTitle"
                       Text="{Binding SearchPageTitle}"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>
        <Grid x:Name="ContentPanel"
        	Grid.Row="1"
              >
        	<TextBlock TextWrapping="Wrap" Text="{Binding DepartureString}" Foreground="{StaticResource PhoneSubtleBrush}" Margin="5,5,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        	<TextBlock TextWrapping="Wrap" Text="{Binding ArrivalString}" Foreground="{StaticResource PhoneSubtleBrush}" Margin="0,119,5,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
        	<Grid Height="80" Margin="-1,34,143,0" VerticalAlignment="Top">
        		<Rectangle Margin="0,2,48,3">
        			<Rectangle.Fill>
        				<SolidColorBrush Color="{StaticResource Mango Leaf Green}"/>
        			</Rectangle.Fill>
        		</Rectangle>
                <es:RegularPolygon InnerRadius="1" Margin="0,15.667,-13.498,16.333" PointCount="3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Width="75" HorizontalAlignment="Right">
                	<es:RegularPolygon.Fill>
                		<SolidColorBrush Color="{StaticResource Mango Leaf Green}"/>
                	</es:RegularPolygon.Fill>
        			<es:RegularPolygon.RenderTransform>
        				<CompositeTransform Rotation="90"/>
        			</es:RegularPolygon.RenderTransform>
                </es:RegularPolygon>
        		<Rectangle Margin="9,11,52,11" RadiusX="3" RadiusY="3" Fill="White"/>
                <toolkit:AutoCompleteBox x:Name="departureBox" Margin="1,0,48,0" BorderThickness="3,3,3,8" ValueMemberBinding="{Binding Title}" FilterMode="Contains" ItemsSource="{Binding Stations}" ItemTemplate="{StaticResource AutoCompleteItemTemplate}" IsTextCompletionEnabled="True" MinimumPopulateDelay="1000" BorderBrush="#26FFFFFF" Background="#26FFFFFF" TextBoxStyle="{StaticResource TextBoxStyleNoSelection}" Text="{Binding DepartureStationString, Mode=TwoWay}" SelectedItem="{Binding DepartureStation, Mode=TwoWay}" DropDownOpened="AutoCompleteBox_DropDownOpened" />
            </Grid>
        	<Grid Height="80" Margin="142,146,0,0" VerticalAlignment="Top">
                <Rectangle Margin="48,3,0,2">
                	<Rectangle.Fill>
                		<SolidColorBrush Color="{StaticResource Mango Leaf Green}"/>
                	</Rectangle.Fill>
                </Rectangle>
                <es:RegularPolygon InnerRadius="1" Margin="-13.485,16.555,0,15.425" PointCount="3" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Width="75" HorizontalAlignment="Left">
                	<es:RegularPolygon.Fill>
                		<SolidColorBrush Color="{StaticResource Mango Leaf Green}"/>
                	</es:RegularPolygon.Fill>
        			<es:RegularPolygon.RenderTransform>
        				<CompositeTransform Rotation="-90" ScaleX="-1"/>
        			</es:RegularPolygon.RenderTransform>
                </es:RegularPolygon>
        		<Rectangle Margin="54,11,8,11" RadiusX="3" RadiusY="3" Fill="White"/>
                <toolkit:AutoCompleteBox x:Name="arrivalBox" Margin="49,0,0,0" ValueMemberBinding="{Binding Title}" FilterMode="Contains" ItemsSource="{Binding Stations}" ItemTemplate="{StaticResource AutoCompleteItemTemplate}" IsTextCompletionEnabled="True" MinimumPopulateDelay="1000" Background="#26FFFFFF" BorderBrush="#26FFFFFF" TextBoxStyle="{StaticResource TextBoxStyleNoSelection}" Text="{Binding ArrivalStationString, Mode=TwoWay}" SelectedItem="{Binding ArrivalStation, Mode=TwoWay}" DropDownOpened="AutoCompleteBox_DropDownOpened" />
        	</Grid>
        </Grid>
        <ext:AdvancedApplicationBar HorizontalAlignment="Left" Margin="0,0,0,61" Width="100" BackgroundColor="{StaticResource Twitter Blue}">
        	<ext:AdvancedApplicationBarIconButton Height="100" IconUri="/icons/appbar.feature.search.rest.png" Text="{Binding SearchPageTitle, Mode=OneWay}" Command="{Binding SearchCommand, Mode=OneWay}"/>
        </ext:AdvancedApplicationBar>

    </Grid>

<!--Sample code showing usage of ApplicationBar--><!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>